<template>
    <div class="tab-bar-item" @click="itemClick">
    <!--未激活、激活、文字三个插槽-->
      <div v-if="!isActive">
        <slot name="item-icon"></slot>
      </div>

      <div v-else>
        <slot name="item-icon-active"></slot>
      </div>

      <div :style="activeStyle" >
        <slot  name="item-text"></slot>
      </div>
      <!--<img src="../../assets/img/tab-bar/首页.png"/>-->
      <!-- 使图片与文字分行  div是独占一行的-->
      <!--<div>首页</div>-->
    </div>
<!--  <div class="tab-bar-item">
    <img src="../../assets/img/tab-bar/分类.png"/>
    <div>分类</div>
  </div>
  <div class="tab-bar-item">
    <img src="../../assets/img/tab-bar/购物车.png"/>
    <div>购物车</div>
  </div>
  <div class="tab-bar-item">
    <img src="../../assets/img/tab-bar/我的ac.png"/>
    <div>我的</div>
  </div>-->
</template>

<script>
  export default {
    name: "tab-bar-item",
    //父传子   路径  字体颜色
    props:{
      path:String,
      activeColor:{
        type:String,
        default:'red'
      }
    },
    data(){
      return{
      }
    },
    computed:{
        isActive(){
          //this.$router.path:活跃路由的path
          //成立时 返回true(即为找到)  没有找到为-1  (url上的地址跟页面的path是不是一个地址)
          // console.log('url'+this.$router.path);
          var res = this.$route.path.indexOf(this.path) !== -1;
          console.log(this.path);
          //true ||false
          return res

        },
      activeStyle(){
          //字体颜色问题
      return this.isActive?{color:this.activeColor}:{}
      }
    },
    methods:{
      itemClick(){
        //点击页面跳转问题
        this.$router.replace(this.path).catch(err=>{})
      }
    }
  }
</script>

<style scoped>
  .tab-bar-item{
    flex: 1;
    text-align: center;
    height: 49px;
    font-size:14px ;
  }
  .tab-bar-item img{
    height: 24px;
    width: 24px;
    margin-top: 3px;
    /*紧凑图片与文字上下距离*/
    vertical-align: middle;
  }

</style>
